<template>
  <div class="page-header-index-wide">
    <a-card :loading="loading"
            :bordered="false"
            :body-style="{'padding': '10px 20px'}"
            :style="{ 'margin-top': '12px' }"
            size="small"
            title="项目工时统计及记录">
      <a-table
        :columns="columns"
        rowKey="id"
        :pagination="false"
        :data-source="dataSource"
        :loading="loading"
        style="margin-bottom: 10px;background-color: #F3F3F3;"
        size="small"
      >
        <template slot="action" slot-scope="text, record">
          <a @click="handleAdd(record)"><span>+</span></a>
        </template>
      </a-table>
      <span style="color: #A9A9A9;">面板显示您最近30天填报工时最多的8个项目，点击+号可填报您在该项目当天的工时。</span>
    </a-card>

    <add-period-detail-modal ref="modalForm" @ok="initData"/>
  </div>
</template>
<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { mixinDevice } from '@/utils/mixin'
  import AddPeriodDetailModal from '@views/time/modules/AddPeriodDetailModal'

  export default {
    name:'PrjTs',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      AddPeriodDetailModal
    },
    data() {
      return {
        columns : [
          {
            title: '项目',
            dataIndex: 'projectName',
          },
          {
            title: '工时',
            key: 'sumhours',
            dataIndex: 'sumhours',
          },
          {
            title: '',
            key: 'action',
            scopedSlots: { customRender: 'action' },
          },
        ],
        dataSource: [],
        url: {
          list: "/tsProjectList/getLastProjects?num=8",
        },
      }
    },
    methods: {
      initData(){
        this.$emit('ok');
      },
      handleAdd(record) {
        this.$refs.modalForm.add();
        this.$refs.modalForm.title = "新增";
        this.$refs.modalForm.disableSubmit = false;
        this.$refs.modalForm.model.projectId = record.isc;
      },
    }
  }
</script>